<template>
  <div class="home">
    <router-view />
    <van-tabbar route>
      <van-tabbar-item to="/home-page">
        <template #icon>
          <svg-icon
            slot="icon"
            name="home"
            :color="route.name === 'home-page' ? '#2489F2' : '#999999'"
          />
        </template>
        <span>首页</span>
      </van-tabbar-item>
      <van-tabbar-item to="/initiator-sign">
        <template #icon>
          <svg-icon
            slot="icon"
            name="sign"
            :color="route.name === 'initiator-sign' ? '#2489F2' : '#999999'"
          />
        </template>
        <span>发起签约</span>
      </van-tabbar-item>
      <van-tabbar-item to="/personal-center">
        <template #icon>
          <svg-icon
            slot="icon"
            name="my"
            :color="route.name === 'personal-center' ? '#2489F2' : '#999999'"
          />
        </template>
        <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRoute } from 'vue-router'
export default defineComponent({
  setup() {
    const route = useRoute()
    return { route }
  }
})
</script>

<style scoped lang="less">
.home {
  height: 100%;
  width: 100%;
}
</style>
